<template>
    <!-- ctrl + enter 格式化
https://service-kq8d34ry-1322805030.gz.tencentapigw.com/release/
   -->
    <!-- 左侧菜单 -->
    <van-row id="left_menu" v-show="show">
        <van-col span="20">
            <router-view></router-view>
        </van-col>
    </van-row>

    <!-- 轮播图 -->
    <van-row id="swiper" justify="center">
        <van-col span="20" justify="center">
            <van-swipe :autoplay="3000" lazy-render style="width: 100%;">
                <van-swipe-item v-for="item in imageArr" :key="item.imageUrl">
                    <img :src="item.imageUrl" style="width: 100%;object-fit:cover">
                </van-swipe-item>
            </van-swipe>
        </van-col>
    </van-row>
    <!-- icon图标 -->
    <van-row justify="space-around">
        <van-col span="4" v-for="icon in iconObjArr" :key="icon.path" @click="clickIcon(icon)">
            <van-icon :name="icon.name" color="#ff6666" size="35" />
            <span style="display: block;">{{icon.title}}</span>
        </van-col>
    </van-row>
    <!-- 推荐歌单栏 --> 
            <PlayLists :leftMsg='leftMsg' :rightMsg="rightMsg"/>
    <!-- 测试 -->
    <div>
        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>

        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>

        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>

        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>
        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>

        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>
        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>

        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>
        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>

        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>
        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>

        <van-row>
            <van-col>
                <h1>1111111</h1>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import { defineComponent,inject } from 'vue';
    import { reactive, toRefs, ref, unref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue"
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex';
    import { getBannerApi, getPlayListsApi } from '../util/request.js'
    import PlayLists from '../components/playLists.vue'
    export default defineComponent({
        name: 'HomeView',
        components: { PlayLists },
        setup() {
            const router = useRouter()
            const store = useStore()
            const show = ref(false);
            onBeforeMount(async () => {
                //获取轮播图
                let res = await getBannerApi()
                data.imageArr = res.data.banners
                console.log(data.imageArr);
            })
            const data = reactive({
                leftMsg:'推荐歌单 >',
                rightMsg:'更多',
                imageArr: [],
                search_value: '',
                iconObjArr: [{
                        name: 'thumb-circle',
                        title: '每日推荐',
                        path: '/daily_music'
                    },
                    {
                        name: 'live',
                        title: '私人漫游',
                        path: '/personal_live'
                    },
                    {
                        name: 'like',
                        title: '歌单',
                        path: '/music_menu'
                    },
                    {
                        name: 'friends',
                        title: '排行榜',
                        path: '/charts'
                    },
                    {
                        name: 'column',
                        title: '有声书',
                        path: '/Audiobook'
                    },
                ]
            })
          
            //点击icon图标
            const clickIcon = (item) => {
                console.log(item);
                router.push({
                    path: item.path
                })

            }
            return {
                ...toRefs(data),
                show,
                clickIcon,
                router,
                store,
                PlayLists,
            }
        }
    });
</script>

<style>
    html,
    body {
        margin: 0;
        padding: 0;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    #left_menu {
        display: none;
        /* width: 100%;
      position: relative;
      float: left; */
    }
</style>